<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">许超是个大帅比</div>
    <a href="">刷新</a>
    <script type="text/babel">
      //第一步 创建一个虚拟dom对象 对象的第一个值为创建的标签（tag），第二个值为 对象的属性（props） 用对象的方式展开 第三个值为创建的这个标签的子元素/内容（children）
      const vDOM = (
        <div
          style={{
            color: "red",
            background: "blue",
            fontSize: "50px",
          }}
        >
          <input type="text" />
          <button>提交</button>
          你好 许超
        </div>
      );
      // 第二步 根据用户DOM中提供的容器————上边写的div的元素，创建一个react虚拟DOM盛放的跟容器
      setTimeout(function () {
        ReactDOM.createRoot(document.getElementById("app")).render(vDOM);
      }, 300);

      // 第三步 吧虚拟DOM在跟容器中渲染
    </script>
  </body>
</html>
